<html>
<head>
    <meta charset="utf-8">
    <title>密码重置页面</title>
<link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="/static/layui/layui.js"></script>
    <style>
        .page-body{
            background: url("../static/4.jpg") no-repeat;
            background-size: 100% 100%;
        }
        .page {
            width: 400px;
            position: absolute;
            margin-left: -200px;
            margin-top: -150px;
            top: 50%;
            left: 50%;
            display: block;
            z-index: 2000;
            background: rgba(0,0,0,0.3);
            padding: 20px;
            border-radius: 25px;
        }
        .page .title{
            color: #fff;
            margin-bottom: 16px;

        }
        .layui-form-item{
            margin-right: 0;
            margin-bottom: 16px;


        }
        .layui-form-label{
            display: inline-block;
            width: 90px;
            text-align: right;
            color: #fff;
        }
        .input-wrap{
            display: inline-block;
            width: calc(100% - 130px);
        }
        .input-wrap input{
            width: 100%;
            border-radius: 10px;
            line-height: 2;
            padding-left: 8px;
        }

    </style>
</head>
<body class="page-body">
<div class="page"><!-- 登录页面区域的div-->
    <div class="title" align="center">
        <h1>密码重置页面</h1>
    </div>
    <!-- 登录表单 （layui的表单） -->
    <form class="layui-form" method="post"> <!-- 表单块 -->
        <!-- 表单的行区块结构 -->
        <div class="layui-form-item">
            <label class="layui-form-label"><img src="../static/user.svg" width="20" height="20" alt=""/></label>
            <div class="layui-input-inline input-wrap">
                <input type="text" name="username" required layverify="required" placeholder="用户名" autocomplete="off"
                       class="layuiinput">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><img src="../static/lock.svg" width="20" height="20" alt=""/>
            </label>
            <div class="layui-input-inline input-wrap">
                <input type="text" name="phone" required layverify="required" placeholder="预留手机号"
                       autocomplete="off" class="layuiinput">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><img src="../static/lock.svg" width="20" height="20" alt=""/>
            </label>
            <div class="layui-input-inline input-wrap">
                <input type="password" name="new_password" required layverify="required" placeholder="新密码"
                       autocomplete="off" class="layuiinput">
            </div>
        </div>
        <br>
        <!-- 返回登录的状态信息显示 -->
        <p align="center">
            <font color="#f05b72">
                <!-- 显示信息代码位置 -->
                {{ msg }}
            </font>
        </p>
        <br>
        <div class="layui-form-item">
            <div style="text-align: center;">
                <input type="submit" class="layui-btn" style="background:orange;border-radius:10px" value="重&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;置"/>
            </div>
        </div>
        <br/>
        <p align="center">
            <!-- 超链接跳转到密码重置页面 -->
            <a href="{% url 'login' %}">
                <font color="white">返回登录</font>
            </a>
        </p>
    </form>
</div>
</body>
</html>